<template>
  <view class="container">
    <!-- 1、胆固醇简介 -->
    <uni-section class="cholesterol-section" title="胆固醇简介" type="line">
      <uni-card :is-shadow="false" class="cholesterol-card">
        <text class="uni-cal">
          胆固醇是体内脂肪类物质的一种，它是细胞膜的重要组成部分，也与多种生理功能相关。胆固醇的过高或过低都可能影响健康。一般来说，保持总胆固醇、LDL（低密度脂蛋白）低、HDL（高密度脂蛋白）高，有助于预防心血管疾病。
        </text>

        <!-- 输入框和计算按钮 -->
        <view class="input-area">
          <view class="input-group">
            <text class="label">请输入总胆固醇 (mg/dL):</text>
            <input v-model="totalCholesterol" type="number" placeholder="请输入总胆固醇值" />
          </view>
          <view class="input-group">
            <text class="label">请输入低密度脂蛋白 (LDL) (mg/dL):</text>
            <input v-model="ldl" type="number" placeholder="请输入LDL值" />
          </view>
          <view class="input-group">
            <text class="label">请输入高密度脂蛋白 (HDL) (mg/dL):</text>
            <input v-model="hdl" type="number" placeholder="请输入HDL值" />
          </view>
          <view class="input-group">
            <text class="label">请输入甘油三酯 (mg/dL):</text>
            <input v-model="triglycerides" type="number" placeholder="请输入甘油三酯值" />
          </view>

          <!-- 结果展示区 -->
          <view class="result-area">
            <text class="result-label">您的胆固醇值:</text>
            <text class="result-value">总胆固醇: {{ totalCholesterol }} mg/dL</text>
            <text class="result-value">LDL: {{ ldl }} mg/dL</text>
            <text class="result-value">HDL: {{ hdl }} mg/dL</text>
            <text class="result-value">甘油三酯: {{ triglycerides }} mg/dL</text>
            <text class="result-status">-{{ status }}</text>
            <text class="health-advice">{{ healthAdvice }}</text>
          </view>
          <button @click="evaluateCholesterol" type="primary">评估胆固醇</button>
        </view>
      </uni-card>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalCholesterol: '', // 总胆固醇
      ldl: '', // 低密度脂蛋白
      hdl: '', // 高密度脂蛋白
      triglycerides: '', // 甘油三酯
      status: '', // 胆固醇状态（正常、高胆固醇、低HDL等）
      healthAdvice: '' // 健康建议
    };
  },
  methods: {
    // 评估胆固醇并给出状态和健康建议
    evaluateCholesterol() {
      if (this.totalCholesterol !== '' && this.ldl !== '' && this.hdl !== '' && this.triglycerides !== '') {
        this.setStatusAndAdvice(this.totalCholesterol, this.ldl, this.hdl, this.triglycerides);
      } else {
        this.status = '请输入完整的胆固醇值';
        this.healthAdvice = '';
      }
    },
    // 根据胆固醇值设置状态和健康建议
    setStatusAndAdvice(totalCholesterol, ldl, hdl, triglycerides) {
      // 总胆固醇评价
      if (totalCholesterol < 200) {
        this.status = '正常';
        this.healthAdvice = '您的胆固醇值正常，保持健康饮食和运动习惯，继续保持良好的生活方式。';
      } else if (totalCholesterol >= 200 && totalCholesterol < 240) {
        this.status = '轻度偏高';
        this.healthAdvice = '您的胆固醇值偏高，建议改善饮食，减少饱和脂肪摄入，并增加运动。';
      } else {
        this.status = '高胆固醇';
        this.healthAdvice = '您的胆固醇过高，建议尽早咨询医生，可能需要药物治疗，并改善饮食和生活方式。';
      }

      // LDL胆固醇（坏胆固醇）评价
      if (ldl < 100) {
        this.status += '，LDL正常';
        this.healthAdvice += '您的LDL胆固醇值良好，继续保持。';
      } else if (ldl >= 100 && ldl < 160) {
        this.status += '，LDL偏高';
        this.healthAdvice += '您的LDL胆固醇值偏高，建议减少高脂肪食物的摄入。';
      } else {
        this.status += '，LDL过高';
        this.healthAdvice += '您的LDL胆固醇过高，建议尽早就医，控制饮食，增加运动。';
      }

      // HDL胆固醇（好胆固醇）评价
      if (hdl >= 60) {
        this.status += '，HDL正常';
        this.healthAdvice += '您的HDL胆固醇值正常，有助于保护心血管健康，保持当前状态。';
      } else if (hdl >= 40 && hdl < 60) {
        this.status += '，HDL偏低';
        this.healthAdvice += '您的HDL胆固醇值较低，建议通过运动和健康饮食增加HDL。';
      } else {
        this.status += '，HDL过低';
        this.healthAdvice += '您的HDL胆固醇值过低，建议加强运动，减少不健康脂肪的摄入。';
      }

      // 甘油三酯评价
      if (triglycerides < 150) {
        this.status += '，甘油三酯正常';
        this.healthAdvice += '您的甘油三酯值正常，继续保持健康饮食和生活习惯。';
      } else if (triglycerides >= 150 && triglycerides < 200) {
        this.status += '，甘油三酯偏高';
        this.healthAdvice += '您的甘油三酯偏高，建议减少糖分摄入和增加运动。';
      } else {
        this.status += '，甘油三酯过高';
        this.healthAdvice += '您的甘油三酯过高，建议尽早就医，控制饮食并改善生活方式。';
      }
    }
  }
};
</script>

<style lang="scss">
  .container {
    padding: 20rpx;

    .cholesterol-section {
      .cholesterol-card {
        .input-area {
          margin-top: 20rpx;
        }

        .input-area {
          .input-group {
            display: flex;
            margin: 10rpx 0;
          }
        }
      }

      .result-area {
        margin-top: 20rpx;
        .result-label {
          font-size: 16px;
        }
        .result-value {
          font-size: 18px;
          font-weight: bold;
        }
        .result-status {
          color: #ff4d4f;
          font-size: 14px;
        }
        .health-advice {
          font-size: 14px;
          color: #0084ff;
          margin-top: 10rpx;
        }
      }
    }
  }
</style>
